<!--
 * @Author: your name
 * @Date: 2022-03-09 10:55:54
 * @LastEditTime: 2022-03-09 13:26:47
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \前端练习\vue\day6\后台管理 布局.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="//at.alicdn.com/t/font_3191674_wgm7fzarhn.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1">
    <style>
        *{padding: 0; margin: 0;}
        html,body,#root{width: 100%;height: 100%;}
        .menu{background-color:rgb(71, 70, 75);}
        #root{display:flex}
        .content{flex:1;background-color:#ccc;display:flex;flex-direction: column;align-items: center;}
        .header{width: 100%;height: 50px;border-bottom: 1px solid #000;display:flex;align-items: center;}
        .main{box-shadow: 0px 0px 20px rgb(70, 67, 67);width: 90%;height: 80%;margin-top:50px;text-align:center}
        #menuBtn{height: 30px;line-height: 30px;width: 30px;font-size: 30px;}
        .menu ul{display:flex;width: 100%;height: 100%;flex-direction: column;list-style: none;}
        .menu ul>li{font-size: 25px;margin:20px 0 0 5px;color:#fff;cursor: pointer;}
        .menu ul>li:hover{color:yellow;}
        .header .sp1{font-weight: 700;margin-left: 20px;}
    </style>
</head>
<body>
    <div id="root">
        <div class="menu" :style="{width:menuWidth+'px'}">
            <ul>
                <li class="iconfont icon-caidan" @click="who='index'">{{menuWidth==200?'后台首页':'后台'}}</li>
                <li class="iconfont icon-caidan" @click="who='goods'">{{menuWidth==200?'商品分类':'商品'}}</li>
                <li class="iconfont icon-caidan" @click="who='order'">{{menuWidth==200?'订单管理':'订单'}}</li>
            </ul>
        </div>
        <div class="content">
            <div class="header">
                <!-- <button @click="menuWidth=menuWidth==200?90:200" :class="`iconfont ${menuWidth==200?'icon-shouqicaidan':'icon-zhankaicaidan'}`" id="menuBtn"></button> -->
                <button @click="menuWidth=menuWidth==200?90:200" :class="{'iconfont':true,'icon-shouqicaidan':menuWidth==200,'icon-zhankaicaidan':menuWidth==90}" id="menuBtn"></button>
                <span class="sp1">首页</span>&gt;

                <transition enter-active-class="animated bounceInRight">
                    <span
                      v-for="item in [
                        {id:1, url: 'index', name: '后台首页'},
                        {id:2, url: 'goods', name: '商品管理'},
                        {id:3, url: 'order', name: '订单管理'},
                      ]"
                      v-if="who === item.url"
                      :key="item.id"
                      style="display: inline-block"
                      >{{item.name}}</span
                    >
                </transition>
            </div>
            
                <transition 
                appear
                enter-active-class="animated bounceInRight" 
                >
                <div class="main" :key="who">
                    <component :is="who"></component>
                </div>

                </transition>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
    Vue.component('index',{
        template:`<h1>后台首页</h1>`,
        methods:{

        },
    })
    Vue.component('goods',{
        template:`<h1>商品分类</h1>`,
    })
    Vue.component('order',{
        template:`<h1>订单管理</h1>`,
    })
    const vm = new Vue({
        el: "#root",
        data: {
            menuWidth:200,
            who:'index'
        }
    })
    </script>
</body>
</html>
